<template>
  <section class="home section" id="home">
    <div class="home__container container grid">
      <div class="home__content grid">
        <div class="home__social">
          <a href="https://gitee.com/ymf930" style="--i: 7" class="button--flex" target="_blank">
            <i class="iconfont icon-gitee-fill-round home__icon"></i>
          </a>
          <a href="http://github.com/ymf-930" style="--i: 8" class="button--flex" target="_blank">
            <i class="iconfont icon-github home__icon"></i>
          </a>
          <a href="https://www.yuque.com/yangmengfei-tg3gt" style="--i: 9" class="button--flex" target="_blank">
            <i class="iconfont icon-yuque home__icon"></i>
          </a>
        </div>
        <div class="home__three" id="home__three">
          <MyOfficeScene></MyOfficeScene>
        </div>

        <div class="home__data">
          <h1 class="home__title">{{ titleTextArr.join('') }}<span class="home__columeline">|</span></h1>
          <h3 class="home__subtitle">
            {{ $t('home__subtitle') }}
          </h3>
          <p class="home__description">
            {{ $t('home__description') }}
          </p>
          <a href="#contact" class="button button--flex button--small home__button">
            <span>{{ $t('home__contact') }}</span>
            <i class="iconfont icon-sendfasong button__icon"></i>
          </a>
        </div>
      </div>
      <div class="home__scroll">
        <a href="#about" class="home__scroll-button button--flex">
          <i class="iconfont icon-shubiao home__scroll__mouse"></i>
          <span>{{ $t('home__scroll-name') }}</span>
          <i class="iconfont icon-arrowdownxiajiantou home__scroll__arrow"></i>
        </a>
      </div>
    </div>
  </section>
</template>

<script>
import MyOfficeScene from '@/components/MyOfficeScene.vue'
import {ref, getCurrentInstance} from 'vue'

export default {
  name: 'AppHome',
  components: {
    MyOfficeScene
  },
  setup() {
    // 打字效果
    const {
      appContext: {
        config: {globalProperties}
      }
    } = getCurrentInstance()
    const titleText = globalProperties.$t('home__title')
    // 用于动态展示打字特效
    const titleTextArr = ref([])
    // 递归每隔200ms打一个字符，完成后隔2s再删除字符 循环
    const writeText = (text, type) => {
      for (let i = 0; i < text.length; i++) {
        setTimeout(() => {
          if (type === 'write') {
            titleTextArr.value.push(text[i])
          } else {
            titleTextArr.value.pop()
          }
          if (i === titleText.length - 1) {
            setTimeout(() => {
              writeText(text, type === 'write' ? 'wipe' : 'write')
            }, 1000)
          }
        }, i * 200)
      }
    }
    writeText(titleText, 'write')
    return {titleTextArr}
  }
}
</script>

<style lang="scss" scoped>
.home {
  &__container {
    gap: 1rem;
  }

  &__content {
    margin-bottom: var(--mb-3);
    grid-template-columns: 0.5fr 3fr;
    align-items: center;

    @include min-screen(768px) {
      padding-top: 5.5rem;
      column-gap: 2rem;
      padding-top: 3.5rem;
    }

    @include min-screen(350px) {
      grid-template-columns: 0.25fr 3fr;
    }

    @include min-screen(568px) {
      grid-template-columns: max-content 1.6fr 2fr;
    }
  }

  &__social {
    display: grid;
    grid-template-columns: max-content;
    row-gap: 1rem;
    transform: translateX(-3rem);
    @include min-screen(768px) {
      transform: translateX(-2rem);
    }
    @include min-screen(568px) {
      transform: translateX(-1rem);
    }
    @include min-screen(350px) {
      transform: translateX(0rem);
    }

    a {
      opacity: 0;
      animation: slideTop 1s ease forwards;
      animation-delay: calc(0.2s * var(--i));
    }
  }

  &__icon {
    font-size: 1.8rem;
    color: var(--first-color);
    transition: all .50s ease;

    &:hover {
      color: var(--first-color-alt);
      transform: translateY(-5px);
    }
  }

  &__blob {
    width: 200px;
    fill: var(--first-color);
  }

  &__three {
    width: 100%;
    height: 240px;

    @include min-screen(568px) {
      order: 1;
      height: 340px;
    }
  }

  &__data {
    max-width: 425px;
    grid-column: 1/3;

    @include min-screen(568px) {
      grid-column: initial;
    }
  }

  &__columeline {
    animation: mydeamon 2s infinite;
  }

  @keyframes mydeamon {
    0% {
      transform: scale(3); //scale代表闪烁的体型变化，其他倾斜等样式自行搜索
      opacity: 1; //透明程度
    }

    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

  &__title {
    font-size: var(--big-font-size);
    margin: 0.4rem 0;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: 1s;
  }

  &__subtitle {
    font-size: var(--h3-font-size);
    color: var(--text-color);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-0-75);
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: .7s;
  }

  &__description {
    margin-bottom: var(--mb-2);
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: 0.7s;
  }

  &__scroll {
    text-align: center;

    a {
      flex-direction: row;
      color: var(--first-color);
      transition: 0.3s;
    }

    &-button {
      color: var(--first-color);
      transition: .3s;
    }

    &-button:hover {
      transform: translateY(0.25rem);
    }

    &__mouse {
      font-size: 2rem;
    }

    &__arrow {
      font-size: 1.3rem;
    }

    span {
      font-size: var(--small-font-size);
      color: var(--title-color);
      font-weight: var(--font-medium);
      margin: 0 10px;
    }

    &:hover {
      transform: translateY(0.25rem);
    }
  }

  &__button {
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 2s;
  }

  &__button:hover .button__icon {
    transform: translateX(0.25rem);
  }
}</style>
